<template>
  <div class="card art-custom-card">
    <div class="card-header">
      <div class="title">
        <h4 class="box-title">数据接收qps</h4>
      </div>
    </div>
    <ArtLineChart class="chart" height="calc(100% - 40px)" :data="y" :xAxisData="x" :showAreaColor="true"
      :showAxisLine="false" />
  </div>
</template>

<script setup lang="ts">
import { BmslzService } from '@/api/bmslzApi'
const x = ref<any[]>([]) //qps监控数组 x
const y = ref<any[]>([]) //qps监控数组 y
let timer: number | null = null

const data = [50, 25, 40, 20, 70, 35, 65, 30, 35, 20, 40, 44]
const xAxisData = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月'
]


// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

onMounted(async () => {
  getQps()
  // 在组件创建时启动轮询
  timer = window.setInterval(() => {
    setTimeout(getQps, 0);
  }, 5000); // 每隔3秒请求一次
});

const getQps = async () => {
  try {
    //查询模板详情
    const data = await BmslzService.qps({})
    x.value=data.x;
    y.value=data.y;
  } catch (err) {
  } finally {
  }
};
</script>

<style lang="scss" scoped>
.card {
  box-sizing: border-box;
  width: 100%;
  height: 420px;
  padding: 20px 0 30px;

  .card-header {
    padding: 0 18px !important;
  }

  .chart {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 20px 0;
  }
}

@media screen and (max-width: $device-phone) {
  .card {
    height: 280px;
  }
}
</style>
